<template>
  <div class="bigbox">
    <div id="big">
      <div
        class="boxb"
        v-for="(v, i) in this.$store.state.userm.arr"
        :key="i"
        @click="fn(i)"
      >
        <span
          ><a href="">{{ v.title }}</a></span
        ><br />
        <span class="yq">{{ v.text }}</span>
        <div class="im"><img :src="v.imgsrc" alt="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn(i) {
      this.$router.push("/abc" + i);
      console.log("/abc" + i);
    },
  },
};
</script>

<style scoped>
.bigbox {
  height: 12.1rem;
  width: 3.42rem;
  margin: 0 auto;
}
#big {
  /* width: 1.64rem; */
  width: 3.42rem;
  margin: 0 auto;
  display: flex;
  /* flex: 1; */
  flex-wrap: wrap;
  justify-content: space-between;
}
.boxb {
  width: 1.64rem;
  height: 1.95rem;
  background: #ffffff;
  padding-top: 0.1rem;
  margin-bottom: 0.1rem;
}
a {
  font-size: 0.13rem;
  color: #2a2e3b;
  font-weight: 600;
}
.yq {
  font-size: 0.07rem;
  -webkit-transform: scale(0.833);
  color: #c0bfc3;
}
.im {
  margin-left: 0.58rem;
  margin-top: 0.43rem;
}
img {
  width: 1.07rem;
  height: 1.02rem;
}
</style>